import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gameplay_flutter/lib_runtime/extension/string_extension/string_text.dart';

import '../../m_me/constants/me_assets_constants.dart';
import '../constants/room_assets.dart';

class RoomMicRequests extends StatelessWidget {
  const RoomMicRequests({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return IntrinsicHeight(
      child: SafeArea(
        child: Column(
          children: [
            Container(
              alignment: AlignmentDirectional.center,
              height: 65.h,
              decoration: BoxDecoration(
                  border: BorderDirectional(
                      bottom: BorderSide(
                          color: const Color(0xFFD8D8D8),
                          width: 0.5.w,
                          style: BorderStyle.solid))),
              child: Stack(
                alignment: Alignment.center,
                children: [
                  Center(
                    child: "Application List".text(
                      fontSize: 20.sp,
                      color: const Color(0xFF1B1B1B),
                      weight: TextFontWeight.medium,
                    ),
                  ),
                  PositionedDirectional(
                    start: 15.w,
                    child: Image.asset(
                      RoomAssets.roomOnlineUserCloseIcon,
                      width: 21.w,
                      height: 21.h,
                    ),
                  )
                ],
              ),
            ),
            _buildUserList(context),
            IntrinsicWidth(
              child: Container(
                height: 45.h,
                decoration: BoxDecoration(
                  color: const Color(0xFF8A72FE),
                  borderRadius: BorderRadius.circular(60.r),
                ),
                margin: EdgeInsetsDirectional.symmetric(vertical: 20.h),
                padding: EdgeInsetsDirectional.symmetric(horizontal: 50.w),
                alignment: AlignmentDirectional.center,
                child: "Apply For Mic".text(
                  fontSize: 20.sp,
                  color: Colors.white,
                  weight: TextFontWeight.medium,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  /// 用户列表
  Widget _buildUserList(BuildContext context) {
    return Expanded(
      child: ListView.separated(
          itemCount: 10,
          separatorBuilder: (context, index) {
            return Divider(
              color: const Color(0xFFD8D8D8),
              height: 0.5.h,
              thickness: 0.5.h,
              indent: 16,
              // 左侧缩进
              endIndent: 16, // 右侧缩进
            );
          },
          itemBuilder: (context, index) {
            return _buildUserItem(context, index);
          }),
    );
  }

  /// 用户列表项
  Widget _buildUserItem(BuildContext context, int index) {
    return Container(
        height: 67.h,
        alignment: AlignmentDirectional.centerStart,
        padding: EdgeInsetsDirectional.only(start: 23.w),
        child: Row(
          children: [
            (index + 1).toString().text(
                  fontSize: 16.sp,
                  color: const Color(0xFFA8A8A8),
                  weight: TextFontWeight.medium,
                ),
            SizedBox(width: 9.w),
            CircleAvatar(
              backgroundColor: Color(0xFFFFFFFF),
              radius: 20.r,
              backgroundImage: const CachedNetworkImageProvider(
                  'https://picsum.photos/200/300'),
              // 使用 NetworkImage
              child: true
                  ? Image.asset(MeAssetsConstants.iconEmpty) // 如果没有图片，显示加载动画
                  : null,
            ),
            SizedBox(width: 12.w),
            Image.asset(
              RoomAssets.roomHomeownerIcon,
              width: 18.w,
              height: 18.h,
            ),
            Container(
              width: 0.5.w,
              height: 16.h,
              color: const Color(0xFFD8D8D8),
              margin: EdgeInsetsDirectional.only(start: 3.w, end: 5.w),
            ),
            Expanded(
              child: "User Name".text(
                fontSize: 18.sp,
                color: Colors.black,
                weight: TextFontWeight.medium,
              ),
            ),
            Image.asset(
              RoomAssets.roomManagerMicUp,
              width: 36.w,
              height: 36.h,
            ),
            SizedBox(width: 25.w)
          ],
        ));
  }
}
